<template>
  <div id="realTimeDataList">
    <div class="title">报警列表</div>
    <div>
      <el-row :gutter="20">
        <el-col :span="7">
          <el-date-picker v-model="timeData"
                          type="daterange"
                          value-format="yyyy-MM-dd"
                          style="width:100%;"
                          @change="timeChange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
        <el-col :span="5">
          <el-input v-model="sn"
                    placeholder="请输入编号"></el-input>
        </el-col>
        <el-col :span="5">
          <el-input v-model="name"
                    placeholder="请输入名称"></el-input>
        </el-col>
        <el-col :span="7">
          <div style="text-align:right">
            <el-button type="primary"
                       style="margin-right:15px"
                       @click="searchClick">查询</el-button>
            <el-button type="primary"
                       @click="reset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="margin-top: 30px">
      <el-table :data="tableData"
                border
                style="width: 100%"
                :header-cell-style="{background:'#F6F7F8'}">
        <el-table-column type="index"
                         label="序号"
                         width="60"
                         align="center"> </el-table-column>
        <el-table-column prop="sn"
                         label="编号"
                         fixed="left"
                         width="200"
                         align="center"></el-table-column>
        <el-table-column prop="name"
                         label="设备名称"
                         width="180"
                         align="center"></el-table-column>
        <el-table-column prop="i1"
                         label="加热电流"
                         align="center"></el-table-column>
        <el-table-column prop="i2"
                         label="搅拌电流"
                         align="center"></el-table-column>
        <el-table-column prop="i3"
                         label="风扇电流"
                         align="center"></el-table-column>
        <el-table-column prop="i4"
                         label="推杆电流"
                         align="center"></el-table-column>
        <el-table-column prop="k1"
                         label="有人探测"
                         align="center">
          <template slot-scope="scope"
                    align="center">
            <span>{{scope.row.k1 == 0 ? '无人' : '有人'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ht1"
                         label="连续加热时间"
                         align="center"></el-table-column>
        <el-table-column prop="jt1"
                         label="连续搅拌时间"
                         align="center"></el-table-column>
        <el-table-column prop="ft1"
                         label="连续风扇时间"
                         align="center"></el-table-column>
        <el-table-column prop="tt1"
                         label="连续推杆时间"
                         align="center"></el-table-column>
        <el-table-column prop="kt1"
                         label="连续探测时间"
                         align="center"></el-table-column>

        <el-table-column prop="ht2"
                         label="连续不加热时间"
                         align="center"></el-table-column>
        <el-table-column prop="jt2"
                         label="连续不搅拌时间"
                         align="center"></el-table-column>
        <el-table-column prop="ft2"
                         label="连续不风扇时间"
                         align="center"></el-table-column>

        <el-table-column prop="ef"
                         label="其他故障"
                         align="center">
          <template slot-scope="scope"
                    align="center">
            <span>{{efList[scope.row.ef]}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdTime"
                         label="时间"
                         align="center"
                         width="180"> </el-table-column>
        <el-table-column prop="state"
                         fixed="right"
                         label="状态"
                         width="150"
                         align="center">
          <template slot-scope="scope"
                    align="center">
            <span>{{typeList[scope.row.s]}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align:right;margin-top:15px">
      <el-pagination background
                     layout="prev, pager, next"
                     :currentPage='current'
                     @current-change="current_change"
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { historysPage } from '../../api/index'
export default {
  data() {
    return {
      timeData: [],
      sn: '',
      name: '',
      start: '',
      end: '',
      tableData: [],
      current: 1,
      total: 0,
      efList: ['无故障', '推杆-探测未联动', '搅拌-探测未联动'],
      typeList: [
        '停止',
        '运行',
        '加热电流',
        '搅拌电流',
        '风扇电流',
        '推杆电流',
        '连续加热时间',
        '连续搅拌时间',
        '连续风扇时间',
        '连续推杆时间',
        '连续探测时间',
        '连续不加热时间',
        '连续不搅拌时间',
        '连续不吹风时间',
      ],
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      historysPage({
        size: 10,
        current: this.current,
        sn: this.sn,
        name: this.name,
        start: this.start,
        end: this.end,
      }).then((res) => {
        this.total = res.data.total
        this.tableData = res.data.records
      })
    },
    timeChange() {
      this.start = this.timeData[0]
      this.end = this.timeData[1]
    },
    current_change(currentPage) {
      this.current = currentPage
      this.getData()
    },
    searchClick() {
      this.current = 1
      this.getData()
    },
    reset() {
      this.sn = ''
      this.name = ''
      this.start = ''
      this.end = ''
      this.timeData = []
      this.current = 1
      this.getData()
    },
  },
}
</script>

<style scoped>
#realTimeDataList {
  padding: 40px;
}
.title {
  color: #202224;
  border-left: 3px solid #4a76ff;
  padding-left: 9px;
  margin-bottom: 30px;
}
.Select {
  padding: 7px 20px;
  background: #4379ee;
  color: #fff;
  cursor: pointer;
  margin: 0 5px;
}
.Unchecked {
  padding: 7px 20px;
  color: #595959;
  cursor: pointer;
  margin: 0 5px;
}
.btnBox {
  margin-top: 30px;
}
</style>